<template>
  <div class="rightInfo custom-select-container">
    <div class="airport-select-container">
      <div class="select-item">
        <label>预测星座</label>
        <el-select
          v-model="localSatsysDefault5"
          placeholder="请选择预测星座"
          clearable
        >
          <el-option
            v-for="item in optionsListSatsys"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item">
        <label>预测仰角（度）</label>
        <el-select
          v-model="localAngleDefault5"
          placeholder="请选择预测仰角"
          clearable
        >
          <el-option
            v-for="item in optionsListAngle"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item">
        <label>算法</label>
        <el-select
          v-model="localAlgorithmDefault5"
          placeholder="请选择算法"
          clearable
        >
          <el-option
            v-for="item in optionsListAlgorithm"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item">
        <label>最低运行标准</label>
        <el-select
          v-model="localStdId5"
          placeholder="请选择最低运行标准"
          clearable
        >
          <el-option
            v-for="item in optionsListStandard"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>

      <!-- 已保存的航路（绑定本地变量） -->
      <div class="select-item">
        <label>请选择已保存的航路</label>
        <el-select
          v-model="localRouteCode5"
          placeholder="请选择已保存的航路"
          clearable
        >
          <el-option
            v-for="item in optionsRouterSaveLists"
            :key="item.id"
            :label="item.code"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, watch } from "vue";

const props = defineProps({
  optionsListSatsys: {
    type: Array,
    required: true,
    default: () => [],
  },
  optionsListAngle: {
    type: Array,
    required: true,
    default: () => [],
  },
  optionsListAlgorithm: {
    type: Array,
    required: true,
    default: () => [],
  },
  optionsListStandard: {
    type: Array,
    required: true,
    default: () => [],
  },
  optionsRouterSaveLists: {
    type: Array,
    required: true,
    default: () => [],
  },

  defaultFormData: {
    type: Object,
    default: () => ({
      optionsListSatsysDefault5: "", // 预测星座初始值
      optionsListAngleDefault5: "", // 预测仰角初始值
      optionsListAlgorithmDefault5: "", // 算法初始值
      stdId5: "", // 最低运行标准初始值
      routeCode5: "", // 已保存航路初始值
    }),
  },
});

const localSatsysDefault5 = ref(
  props.defaultFormData.optionsListSatsysDefault5
);
const localAngleDefault5 = ref(props.defaultFormData.optionsListAngleDefault5);
const localAlgorithmDefault5 = ref(
  props.defaultFormData.optionsListAlgorithmDefault5
);
const localStdId5 = ref(props.defaultFormData.stdId5);
const localRouteCode5 = ref(props.defaultFormData.routeCode5);

const formData = computed(() => ({
  optionsListSatsysDefault5: localSatsysDefault5.value,
  optionsListAngleDefault5: localAngleDefault5.value,
  optionsListAlgorithmDefault5: localAlgorithmDefault5.value,
  stdId5: localStdId5.value,
  routeCode5: localRouteCode5.value,
}));

const emit = defineEmits(["update:formData"]);

watch(
  formData,
  (newFormData) => {
    emit("update:formData", newFormData);
  },
  { deep: true, immediate: true }
);

// defineExpose({
//   resetForm: (newDefaultData = {}) => {
//     localSatsysDefault5.value =
//       newDefaultData.optionsListSatsysDefault5 ||
//       props.defaultFormData.optionsListSatsysDefault5;
//     localAngleDefault5.value =
//       newDefaultData.optionsListAngleDefault5 ||
//       props.defaultFormData.optionsListAngleDefault5;
//     localAlgorithmDefault5.value =
//       newDefaultData.optionsListAlgorithmDefault5 ||
//       props.defaultFormData.optionsListAlgorithmDefault5;
//     localStdId5.value = newDefaultData.stdId5 || props.defaultFormData.stdId5;
//     localRouteCode5.value =
//       newDefaultData.routeCode5 || props.defaultFormData.routeCode5;
//   },
//   getCurrentFormData: () => formData.value,
// });
</script>

<style scoped lang="scss">
.airport-select-container {
  padding: 0 1px;
  height: auto;
  height: calc(100vh - 212px);
  overflow-y: auto;
  box-sizing: border-box;
}

.select-item {
  margin-bottom: 12px;
}

.select-item label {
  text-align: left;
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff !important;
}

/* 滚动条样式：与AirportForecast保持一致 */
.airport-select-container::-webkit-scrollbar {
  width: 4px;
}

.airport-select-container::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}

.airport-select-container::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}

.airport-select-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}
.el-select-dropdown__item {
  font-size: 12px;
  height: 28px !important;
  line-height: 28px !important;
  background-color: #060f25;
  color: #fff;
}

.el-select-dropdown__item:hover {
  background-color: #0c1e4b;
  color: #fff;
}

.el-select-dropdown__item.is-selected {
  background-color: #0c1e4b;
  color: #0083cf !important;
}
.el-select-dropdown__item.is-hovering {
  background-color: #0c1e4b;
  color: #fff;
}
</style>
